<template>
  <a-drawer
    width="870px"
    :visible="visible"
    :bodyStyle="{ padding: '1px' }"
    @close="cancel"
    :title="title"
    :destroyOnClose="true"
  >
    <div class="eip-drawer-body beauty-scroll" v-if="gridOptions">
      <a-tabs :default-active-key="1" tab-position="left" style="height: 100%">
        <a-tab-pane :key="1">
          <template slot="tab">
            <div><a-icon type="table" />表格视图</div>
          </template>
          <setting-style :option="gridOptions.style"></setting-style>
        </a-tab-pane>
        <a-tab-pane :key="2">
          <template slot="tab">
            <div><a-icon type="edit" /> 显示列</div>
          </template>
          <setting-field
            :option="gridOptions.field"
            :field="field"
          ></setting-field>
        </a-tab-pane>
        <a-tab-pane :key="3">
          <template slot="tab">
            <div><a-icon type="block" />过滤</div>
          </template>
          <setting-filter
            :filters="gridOptions.filter"
            :columns="field"
          ></setting-filter>
        </a-tab-pane>
        <a-tab-pane :key="4">
          <template slot="tab">
            <div><a-icon type="read" />排序</div>
          </template>
          <setting-sort
            :option="gridOptions.sort"
            :field="field"
          ></setting-sort>
        </a-tab-pane>
        <a-tab-pane :key="6">
          <template slot="tab">
            <div><a-icon type="profile" /> 颜色</div>
          </template>
          <setting-color
            :option="gridOptions.color"
            :field="field"
          ></setting-color>
        </a-tab-pane>

        <a-tab-pane :key="8">
          <template slot="tab">
            <div><a-icon type="printer" />快速筛选</div>
          </template>
          <setting-filter-list
            :option="gridOptions.filterLeft"
            :field="field"
          ></setting-filter-list>
        </a-tab-pane>

        <a-tab-pane :key="9">
          <template slot="tab">
            <div><a-icon type="code" />动作</div>
          </template>
        </a-tab-pane>

        <a-tab-pane :key="10">
          <template slot="tab">
            <div><a-icon type="code" />移动端</div>
          </template>
        </a-tab-pane>
        <a-tab-pane :key="11">
          <template slot="tab">
            <div><a-icon type="code" />链接参数</div>
          </template>
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="eip-drawer-toolbar">
      <a-space>
        <a-button @click="cancel"><a-icon type="close" />取消</a-button>

        <a-button @click="public" type="danger"
          ><a-icon type="save" />发布</a-button
        >
      </a-space>
    </div>
  </a-drawer>
</template>

<script>
import { viewPublic, findById } from "@/services/system/zerocode/view/designer";
import { mapMutations, mapGetters } from "vuex";
import settingStyle from "../components/style";
import settingField from "../components/field";
import settingSort from "../components/sort";
import settingColor from "../components/color";
import settingFilterList from "../components/filterList";
import settingFilter from "../components/filter";
export default {
  name: "setting-index",
  components: {
    settingStyle,
    settingField,
    settingSort,
    settingColor,
    settingFilterList,
    settingFilter,
  },
  data() {
    return {
      gridOptions: null,
      field: [],
    };
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    zeroCodeId: {
      type: String,
    },

    title: {
      type: String,
    },
  },
  mounted() {
    this.find();
  },
  computed: {
    ...mapGetters("account", ["zeroCode"]),
  },
  methods: {
    ...mapMutations("account", ["setZeroCode"]),
    /**
     * 查找
     */
    async find() {
      var result = await findById(this.zeroCodeId);
      this.gridOptions = this.$utils.merge(
        this.$utils.clone(this.eipZeroCodeView, true),
        this.$utils.toStringJSON(result.data.publicJson)
      );
      var field = this.$utils.toStringJSON(result.data.columnJson);
      this.eipSystemFiled.forEach((item) => {
        field.push({
          key: item.key,
          cicon: item.cicon,
          width: 100,
          type: "sys",
          label: item.title,
          check: false,
        });
      });
      this.field = field;
    },
    /**
     * 取消
     */
    cancel() {
      this.$emit("update:visible", false);
    },

    /**
     * 表格配置发布
     */
    public() {
      let that = this;
      let form = {
        zeroCodeId: that.zeroCodeId,
        publicJson: JSON.stringify(that.gridOptions),
      };

      that.$loading.show({ text: "发布中,请稍等..." });
      viewPublic(form).then(function (result) {
        that.$loading.hide();
        if (result.code === that.eipResultCode.success) {
          that.$message.success(result.msg);
          var zeroCode = that.zeroCode.filter(
            (f) => f.zeroCodeId == form.zeroCodeId
          );
          if (zeroCode && zeroCode.length > 0) {
            zeroCode[0].publicJson = form.publicJson;
            that.setZeroCode(zeroCode);
          }
          that.$emit("public", form);
        } else {
          that.$message.error(result.msg);
        }
      });
    },
  },
};
</script>
<style scoped>
/deep/ .ant-tabs .ant-tabs-left-bar .ant-tabs-tab {
  text-align: left !important;
}

/deep/.ant-tabs .ant-tabs-left-content {
  padding-left: 3px !important;
}
</style>
